<template>
  <div class="dirverhouseheader">
    // 搜索区域
    <div class="selectarea">
      // 校区选择区域
      <div class="selectschoolarea common">
        <XgyBgBoxPoint>
          <template v-slot:contentbody>
            <div class="content">{{currentUniversity.name}}校区</div>

          </template>
          <template v-slot:contentafter>
            <el-dropdown>

              <span class="el-dropdown-link">
                <div class="aftericon"></div>
              </span>
              <template v-slot:dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item,index) in universityList"
                                    :key="index"
                                    @click="getData(index,null,null)">{{item}}校区</el-dropdown-item>
                </el-dropdown-menu>
              </template>

            </el-dropdown>

          </template>
        </XgyBgBoxPoint>
      </div>
      // 学院选择区域
      <div class="selectcollagearea common">
        <XgyBgBoxPoint> <template v-slot:contentbody>
            {{currentCollege.name}}
          </template>
          <template v-slot:contentafter>
            <el-dropdown>

              <span class="el-dropdown-link">
                <div class="aftericon"></div>
              </span>
              <template v-slot:dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item,index) in collegeList"
                                    :key="index"
                                    @click="getData(currentUniversity.id,index,null)">{{item.name}}</el-dropdown-item>
                </el-dropdown-menu>
              </template>

            </el-dropdown>
          </template>
        </XgyBgBoxPoint>
      </div>
      // 班级选择区域
      <div class="selectmajorarea common">
        <XgyBgBoxPoint> <template v-slot:contentbody>
            {{currentClass.name}}
          </template>
          <template v-slot:contentafter>
            <el-dropdown>

              <span class="el-dropdown-link">
                <div class="aftericon"></div>
              </span>
              <template v-slot:dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item,index) in classList"
                                    :key="index"
                                    @click="getData(currentUniversity.id,currentCollege.id,index)"> {{item}}</el-dropdown-item>

                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </XgyBgBoxPoint>
      </div>
      // 日期选择区域
      <div class="selectdatearea common">
        <XgyBgBoxPoint> <template v-slot:contentbody>
            {{dateTime}}
          </template>
          <!-- <template v-slot:contentafter>
            <el-dropdown>

              <span class="el-dropdown-link">
                <div class="aftericon"></div>
              </span>
              <template v-slot:dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template> -->
        </XgyBgBoxPoint>
      </div>

    </div>
    // 功能按钮区域
    <div class="functionbuttons">
      <div class="return common">
        <XgyBgBoxPoint @click="goReturn">
          <template v-slot:contenttitle>
            <div class="titleicon"></div>
          </template>
          <template v-slot:contentbody>
            返回
          </template>
        </XgyBgBoxPoint>
      </div>
      <div class="index common"
           @click="handlertiaozhuan('Home')">
        <XgyBgBoxPoint> <template v-slot:contenttitle>
            <div class="titleicon"></div>
          </template> <template v-slot:contentbody>
            首页
          </template></XgyBgBoxPoint>
      </div>
    </div>
  </div>
</template>

<script>
import XgyBgBoxPoint from '@/components/driverhouse/XgyBgBoxPoint'

import { getAllCollegeTree } from '@/api/backend/college'
import { getDataByClassId, getDataByUniversityId, getDataByCollegeId } from '@/api/dashboard/cockpitController'
import { getAllClassListByCollegeId } from "@/api/backend/class"
export default {
  name: "DriverHouseHeader",
  components: {
    XgyBgBoxPoint
  },
  data () {
    return {
      // 日期
      dateTime: '',
      //学校、学院、班级树形结构
      collegeTree: [],
      // 校区列表
      universityList: [],
      // 学院列表
      collegeList: [],
      // 班级列表
      classList: [],
      // 当前校下标
      currentUniversity: '0',
      // 当前学院下标
      currentCollege: '0',
      // 当前班级下标
      currentClass: '0',
    }
  },
  async created () {
    // 获取校区、学院、班级列表
    this.collegeTree = await getAllCollegeTree()
    this.collegeTree.map(university => {
      this.universityList.push(university.campus)
    })

    this.dateTime = this.$store.state.dashBoardData.date
    this.getData(0)
  },
  methods: {
    handlertiaozhuan (name) {
      this.$router.push({ name: name })
    },


    /**
     * @description:获取驾驶舱数据，更新vuex驾驶舱数据
     * @param {*}
     * @return {*}
     */
    async getData (universityIndex, collegeIndex, classIndex) {
      if (universityIndex != null) {
        this.currentUniversity = { id: universityIndex, name: this.collegeTree[universityIndex].campus }
        this.collegeList = this.collegeTree[universityIndex].colleges
        if (collegeIndex == null && this.universityIndex != this.currentUniversity.id) {
          let data = await getDataByUniversityId(101 + universityIndex)
          if (data != undefined)
            this.updateDashBoardData(data)

          this.currentCollege = { id: 0, name: '' }
          if (this.classIndex == null) {
            this.currentClass = { id: 0, name: '' }
          }
        }
      }
      if (collegeIndex != null) {
        this.currentCollege = { id: collegeIndex, name: this.collegeList[collegeIndex].name }
        let classList = await getAllClassListByCollegeId(this.collegeList[collegeIndex].id)
        this.classList = []
        classList.map(item => {
          let classes = item.classes
          classes.map(i => {
            this.classList.push(i)
          })
        })
        if (classIndex == null) {
          let data = await getDataByCollegeId(this.collegeList[collegeIndex].id);
          if (data != undefined)
            this.updateDashBoardData(data)
          this.currentClass = { id: 0, name: '' }
        }

      }
      if (classIndex != null) {
        this.currentClass = { id: classIndex, name: this.classList[classIndex] }
        let data = await getDataByClassId(this.currentClass.name)
        if (data != undefined)
          this.updateDashBoardData(data)
        this.updateDashBoardData(data)
      }





    },
    // 返回上一页
    goReturn () {
      this.$router.go(-1)
    },
    // 更新驾驶舱数据
    updateDashBoardData (data) {
      this.$store.state.dashBoardData = data
    }
  }

}
</script>

<style lang="less" scoped>
.common {
  cursor: pointer;
  margin: 0 0.7rem;
  height: 3rem;
  font-size: 1.2rem;
  color: #ffffff;
}
.dirverhouseheader {
  display: flex;
  justify-content: space-between;
  .selectarea {
    display: flex;
    justify-content: flex-start;

    .selectschoolarea {
      width: 9.25rem;
      .aftericon {
        width: 1.4rem;
        height: 1.4rem;
        background-image: url("../../assets/driverhouseimg/downlisticon.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
    .selectcollagearea {
      width: 11.25rem;
      .aftericon {
        width: 1.4rem;
        height: 1.4rem;
        background-image: url("../../assets/driverhouseimg/downlisticon.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
    .selectmajorarea {
      width: 14.8rem;
      .aftericon {
        width: 1.4rem;
        height: 1.4rem;
        background-image: url("../../assets/driverhouseimg/downlisticon.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
    .selectdatearea {
      width: 13.3rem;
      .aftericon {
        width: 1.4rem;
        height: 1.4rem;
        background-image: url("../../assets/driverhouseimg/downlisticon.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
  .functionbuttons {
    display: flex;
    justify-content: flex-start;
    .return {
      width: 6.3rem;
      .titleicon {
        width: 2.25rem;
        height: 2.25rem;
        background-image: url("../../assets/driverhouseimg/returnbuttonbg.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
    .index {
      width: 6.3rem;
      .titleicon {
        width: 2.25rem;
        height: 2.25rem;
        background-image: url("../../assets/driverhouseimg/indexbuttonbg.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>

